const IndeterminateCheckbox = React.forwardRef( ({indeterminate, ...rest}, ref) => { const defaultRef = React.useRef(); const resolvedRef = ref || defaultRef; React.useEffect(() => { resolvedRef.current.indeterminate = indeterminate; }, [resolvedRef, indeterminate]); return <input type="checkbox" ref={resolvedRef} {...rest} />; }, );Cómo arreglar "Falta el nombre para mostrar en la definición del componente" en la línea 1
Para corregir este error, debe colocar un displayName en su componente. Esto sucede porque su arrow function inside forwardRef no tiene el contexto de su function name .
Solution one :
Pon esto al final de tu archivo.
const IndeterminateCheckbox = React.forwardRef( ({indeterminate, ...rest}, ref) => { const defaultRef = React.useRef(); const resolvedRef = ref || defaultRef; React.useEffect(() => { resolvedRef.current.indeterminate = indeterminate; }, [resolvedRef, indeterminate]); return <input type="checkbox" ref={resolvedRef} {...rest} />; }, ); IndeterminateCheckbox.displayName = 'IndeterminateCheckbox'O
Puede evitar usar arrow function inside forwardRef y use named functions .
const IndeterminateCheckbox = React.forwardRef( function Component({indeterminate, ...rest}, ref) { const defaultRef = React.useRef(); const resolvedRef = ref || defaultRef; React.useEffect(() => { resolvedRef.current.indeterminate = indeterminate; }, [resolvedRef, indeterminate]); return <input type="checkbox" ref={resolvedRef} {...rest} />; } }, );